- 最終更新日
- 記事公開日
【CSSアニメーション】２つ重ねた画像を両方ともクロスフェード
ちょっとおしゃれなデザインにしたいから、２つの画像フレームが少しだけ重なるようなレイアウトにしたいの。
ついでに、その画像フレームの中の写真が次々にフェードエフェクトで切り替わるようにしたいんだけど、どうすればいい？
了解です！
CSSアニメーションを使用した方法をご紹介します↓
/* -----------------------------------------------------
フレーム
----------------------------------------------------- */
#flame {
width:640px;
height:480px;
background:#eee;
position:relative;
}
#lf {
position:absolute;
top:0;
left:0;
width:70%; /* 448px */
padding-bottom:46.7%; /* 299px */
z-index:30;
overflow:hidden;
}
#rf {
position:absolute;
bottom:0;
right:0;
width:60%; /* 384px */
padding-top:40%; /* 256px */
z-index:20;
}
/* -----------------------------------------------------
アニメーション（左）画像3枚
----------------------------------------------------- */
.lf_fead {
list-style-type:none;
margin:0;
padding:0;
}
.lf_fead li {
position:relative;
}
.lf_fead li img {
position:absolute;
top:0;
left:0;
max-width:100%;
vertical-align:bottom;
}
.lf_fead li:nth-child(n+2) img {
animation-duration:12s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-delay:0s;
opacity:0;
}
.lf_fead li:nth-child(2) img {
animation-name:lfmt2;
}
.lf_fead li:nth-child(3) img {
animation-name:lfmt3;
}
.lf_fead li:nth-child(4) img {
animation-name:lfmt4;
}
@keyframes lfmt2 {
20% {
opacity:0;
}
25% {
opacity:1;
}
100% {
opacity:1;
}
}
@keyframes lfmt3 {
55% {
opacity:0;
}
60% {
opacity:1;
}
100% {
opacity:1;
}
}
@keyframes lfmt4 {
90% {
opacity:0;
}
95% {
opacity:1;
}
100% {
opacity:1;
}
}
/* -----------------------------------------------------
アニメーション（右）画像2枚
----------------------------------------------------- */
.rf_fead {
list-style-type:none;
margin:0;
padding:0;
}
.rf_fead li {
position:relative;
}
.rf_fead li img {
position:absolute;
bottom:0;
right:0;
max-width:100%;
vertical-align:bottom;
}
.rf_fead li:nth-child(n+2) img {
animation-duration:6s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-delay:0.5s;
opacity:0;
}
.rf_fead li:nth-child(2) img {
animation-name:rfmt2;
}
.rf_fead li:nth-child(3) img {
animation-name:rfmt3;
}
@keyframes rfmt2 {
20% {
opacity:0;
}
40% {
opacity:1;
}
100% {
opacity:1;
}
}
@keyframes rfmt3 {
70% {
opacity:0;
}
90% {
opacity:1;
}
100% {
opacity:1;
}
}<html>
<body>
<div id="flame">
<!-- 左フレーム -->
<ul id="lf" class="lf_fead">
<li><img src="./image/momo.jpg"></li>
<li><img src="./image/muscat.jpg"></li>
<li><img src="./image/nasi.jpg"></li>
<li><img src="./image/momo.jpg"></li>
</ul>
<!-- 右フレーム -->
<ul id="rf" class="rf_fead">
<li><img src="./image/melon.jpg"></li>
<li><img src="./image/pine.jpg"></li>
<li><img src="./image/melon.jpg"></li>
</ul>
</div>
</body>
</html>※エフェクトの関係上、最後の画像は一枚目と同じ画像を差し込む必要があるのでご注意ください。
画像を一ヵ所に重ねて、アニメーションで一枚ずつ非表示→表示としているだけの仕組みです。
あえてバラバラに動くようにアニメーションの開始時間をずらしてあります。
CSSもフレームごとに分けて作成していますので、構成は分かりやすいかと思います。
ぜひ、色々いじってみてください。
